<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <script src="../../js/vue.js"></script>  <!-- vue追加 -->
  <script src="../../js/axios.min.js"></script>		<!-- vue的AJAX追加 -->
 
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
 	
<style type="text/css">
	#empinfo{
		margin-top: 30px;
		margin-left: 80px;
		
	}
	
</style>
</head>
<body>
<br/>
<!-- 更改信息页 -->
<div style="margin-top:40px ;margin-left: 120px" >
	<font size="5">更改部门信息页</font></div><br/>
	
<div id="depInfo" style="margin-left: 30px">
	<div class="layui-col-sm7" style="margin-top: 10px" >
		<input  type="text" name="depId" placeholder="部门编号" autocomplete="off" class="layui-input" th:value="${dep.depId}"></input>
	</div>
	
	<div class="layui-col-md7" style="margin-top: 10px" >
		原部门名称：<span>[[${dep.depName}]]</span>		
		<input  v-model="depName"  type="text" name="title" placeholder="请输入新名称" autocomplete="off" class="layui-input" ></input>
	</div>
	
	<div class="layui-col-md7" style="margin-top: 10px">
		<input type="button"  @click="updateDep" value="提交部门修改信息" style="margin-left: 100px" class="layui-btn layui-btn-radius"/><br/>
	</div>
</div>

<script >
	
	var depInfo=new Vue({
		el:"#depInfo",
		
		data:{
			depId:"",
			depName:"",
			
			
		},
		
		methods:{
			updateDep:function(){
				axios.get(
					"http://localhost:8080/updateDep",{
						params:{
							depId:this.depId,
							depName:this.depName
						}
					}
				).then(data=>{				
					alert(data.data.msg);
				})
			}
			
		}
		
		
	})
</script>

</body>
</html>